<template>
  <Layout
    :style="{
      background: '#fff',
      padding: '10px 0px 0px 0px',
    }"
  >
    <LayoutHeader
      :style="{
        background: '#fff',
        height: '44px',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }"
    >
      <!-- <div
        :style="{
          lineHeight: '34px',
          textAlign: 'left',
        }"
      >
        nasfast
      </div> -->
      <Menu
        v-model:selectedKeys="selectedKeys"
        theme="light"
        mode="horizontal"
        :style="{ lineHeight: '44px', textAlign: 'center', align: 'center' }"
      >
        <MenuItem key="0" @click="gourl('/welcome')" :icon="h(HomeOutlined)">
          欢迎
        </MenuItem>
        <MenuItem key="1" @click="gourl('/blog')" :icon="h(ReadOutlined)"
          >博客</MenuItem
        >
        <MenuItem key="2" @click="gourl('/link')" :icon="h(LinkOutlined)"
          >网址</MenuItem
        >
        <MenuItem key="3" @click="gourl('/img')" :icon="h(PictureOutlined)"
          >图片</MenuItem
        >
        <MenuItem
          key="4"
          @click="gourl('/video')"
          :icon="h(VideoCameraOutlined)"
          >视频</MenuItem
        >
        <MenuItem
          key="5"
          @click="gourl('/music')"
          :icon="h(CustomerServiceOutlined)"
          >音乐</MenuItem
        >
        <MenuItem key="6" @click="gourl('/food')" :icon="h(CoffeeOutlined)"
          >美食</MenuItem
        >
        <MenuItem
          key="7"
          @click="gourl('/manage')"
          :icon="h(EyeInvisibleOutlined)"
          >管理</MenuItem
        >
        <MenuItem
          key="99"
          @click="gourl('/about')"
          :icon="h(QuestionCircleOutlined)"
          >关于</MenuItem
        >
      </Menu>
      <!-- <div
        :style="{
          lineHeight: '34px',
          textAlign: 'right',
        }"
      >
        settings
      </div> -->
    </LayoutHeader>

    <LayoutContent
      :style="{
        background: '#fff',
        marginTop: '10px',
      }"
    >
      <RouterView />
    </LayoutContent>
  </Layout>
</template>
<script lang="ts" setup>
import { ref, onBeforeMount, h } from "vue";
import {
  LayoutHeader,
  Menu,
  MenuItem,
  LayoutContent,
  Layout,
} from "ant-design-vue";
import {
  CustomerServiceOutlined,
  QuestionCircleOutlined,
  PictureOutlined,
  VideoCameraOutlined,
  HomeOutlined,
  LinkOutlined,
  ReadOutlined,
  EyeInvisibleOutlined,
  CoffeeOutlined,
} from "@ant-design/icons-vue";
import { RouterView } from "vue-router";
import { gourl } from "../util/routersetup";
const selectedKeys = ref<string[]>(["0"]);
onBeforeMount(() => {
  gourl("/welcome");
});
</script>
<style scoped></style>
